import React from 'react'
import { Table } from 'antd';
import { Switch } from 'antd';
import { Button } from 'antd';
import { Modal } from 'antd';
import { message } from 'antd';
import AddGoods from './../goodsManage/AddGoods'
import ModifyGoods from './../goodsManage/ModifyGoods'
import DeleteGoods from './../goodsManage/DeleteGoods'
import Axios from "axios";
import allApi from "../../../api/api.config";

const columns = [
    {
        title: 'ID',
        dataIndex: 'pro_id',
    },
    {
        title: '商品名称',
        dataIndex: 'pro_name',
    },
    {
        title: '价格',
        dataIndex: 'pro_promoney',
    },
    {
        title: '上架',
        dataIndex: 'pro_prostate',
    },
    {
        title: '排序',
        dataIndex: 'pro_prosort',
    },
    {
        title: '虚拟销量',
        dataIndex: 'pro_vrsale',
    },
    {
        title: '操作',
        dataIndex: 'Operate',
    },
];

class GoodsManageTable extends React.Component {
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    constructor(props) {
        super(props);
        this.state = {first:true}
    }

    componentDidMount(e) {
        Axios.post("allApi.goodsApi.categoryManage",{
            // pro_id:e.pro_id,
            // pro_name:e.pro_name,
            // pro_promoney:e.pro_promoney,
            // pro_prostate:e.pro_prostate,
            // pro_prosort:e.pro_prosort,
            // pro_vrsale:e.pro_vrsale,
        }).then((res)=>{
            if (res.data.code===200){
                this.setState({
                    // data:res.data.data,
                    first:false
                })
            }else{
                this.error('加载出错')
                this.setState({
                    // data:res.data.data,
                    first:false
                })
            }
        }).catch((err)=>{
            console.log(err);
            this.setState({
                // data:res.data.data,
                first:false
            })
        })
    }

    state = { visible: false };

    showModal = () => {
        this.setState({
            visible1: true,
            visible2: false,
            visible3: false,
        });
    };
    showModal2 = () => {
        this.setState({
            visible2: true,
            visible1: false,
            visible3: false,
        });
    };
    showModal3 = () => {
        this.setState({
            visible3: true,
            visible1: false,
            visible2: false,
        });
    };

    //添加
    handleOk = e => {
        console.log(e);
        message.success('添加成功');
        this.setState({
            visible1: false,
        });
        Axios.post(allApi.goodsApi.addGoods,{
            pro_id:e.pro_id,
            pro_name:e.pro_name,
            pro_promoney:e.pro_promoney,
            pro_prostate:e.pro_prostate,
            pro_prosort:e.pro_prosort,
            pro_vrsale:e.pro_vrsale,
            product:e.product,
        }).then((res)=> {
            if (res.data.code===200){
                this.success('添加成功')
            }else {
                this.error('加载出错,请联系管理员')
            }
        }).catch((err)=> {
            console.log(err);
        })
    };

    //修改
    handleOk2 = e => {
        console.log(e);
        message.success('修改成功');
        this.setState({
            visible2: false,
        });
        Axios.post(allApi.goodsApi.updateGoods,{
            pro_id:e.pro_id,
            pro_name:e.pro_name,
            pro_promoney:e.pro_promoney,
            pro_prosort:e.pro_prosort,
            pro_vrsale:e.pro_vrsale,
            product:e.product,
        }).then((res)=> {
            if(res.data.code===200) {
                this.success('修改成功')
            }else {
                this.error('加载出错,请联系管理员')
            }
        }).catch((err)=> {
            console.log(err);
        })
    };

    //删除
    handleOk3 = e => {
        console.log(e);
        message.success('删除成功');
        this.setState({
            visible3: false,
        });
        Axios.post(allApi.goodsApi.deleteGoods,{
            id:e.id,
        }).then((res)=> {
            if(res.data.code===200) {
                this.success('删除成功')
            }else {
                this.error('加载出错,请联系管理员')
            }
        }).catch((err)=> {
            console.log(err);
        })
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible1: false,
        });
    };
    handleCancel2 = e => {
        console.log(e);
        this.setState({
            visible2: false,
        });
    };
    handleCancel3 = e => {
        console.log(e);
        this.setState({
            visible3: false,
        });
    };

    render() {
        const data = [];
        for (let i = 0; i < 46; i++) {
            data.push({
                key: i,
                pro_id: `${i+1}`,
                pro_name: `新疆超甜哈密瓜，限量特惠 ${i}`,
                pro_promoney: `${i}.00`,
                pro_prostate: <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />,
                pro_prosort: `${i}`,
                pro_vrsale: `${i}`,
                Operate: <div>
                    <Button type="primary" ghost onClick={this.showModal}>
                        添加
                    </Button>
                    <Button type="primary" ghost onClick={this.showModal2}>
                        修改
                    </Button>
                    <Button type="primary" ghost onClick={this.showModal3}>
                        删除
                    </Button>
                </div>
            });
        }
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            selections: [
                Table.SELECTION_ALL,
                Table.SELECTION_INVERT,
                {
                    key: 'odd',
                    text: 'Select Odd Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return false;
                            }
                            return true;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
                {
                    key: 'even',
                    text: 'Select Even Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return true;
                            }
                            return false;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
            ],
        };
        return (
            <div>
                <Table loading={{spinning:this.state.first}} rowSelection={rowSelection} columns={columns} dataSource={data} />
                <Modal
                    title="添加商品"
                    visible={this.state.visible1}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                    width={1300}
                >
                    <AddGoods></AddGoods>
                </Modal>
                <Modal
                    title="修改商品"
                    visible={this.state.visible2}
                    onOk={this.handleOk2}
                    onCancel={this.handleCancel2}
                    okText="确认"
                    cancelText="取消"
                    width={500}
                >
                    <ModifyGoods></ModifyGoods>
                </Modal>
                <Modal
                    title="删除商品"
                    visible={this.state.visible3}
                    onOk={this.handleOk3}
                    onCancel={this.handleCancel3}
                    okText="确认"
                    cancelText="取消"
                    width={500}
                >
                    <DeleteGoods></DeleteGoods>
                </Modal>
            </div>
        )
    }
}
export {GoodsManageTable as default}